<template>
  <div class="container">
    <h2 style="text-align: center;">爱好管理</h2>
    <div class="content">
      <el-button type="primary" @click="dialogFormVisible = true">添加爱好</el-button>
      <el-table
        :data="likelist"
        style="width: 100%">
        <el-table-column type="selection" width="55" />
        <el-table-column prop="title" label="类型" auto-with>
          <template #default="scope">
          <div v-if="scope.row.isedit">
            <el-input v-model="scope.row.title" />
          </div>
          <div v-else>
            {{scope.row.title}}
          </div>
          </template>
        </el-table-column>
        <el-table-column prop="text" label="内容" auto-with>
          <template #default="scope">
            <div v-if="scope.row.isedit">
              <el-input v-model="scope.row.text" />
            </div>
            <div v-else>
              {{scope.row.text}}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="contorl" label="操作" auto-with>
        <template #default="scope">
          <span style="cursor: pointer;marginLeft: 10px;color:#79BBFF" v-if="!scope.row.isedit" @click="scope.row.isedit = true"><el-icon color="#79BBFF"><i-ep-Edit /></el-icon> 编辑 </span>
          <span style="cursor: pointer;marginLeft: 10px;color:#79BBFF" v-if="scope.row.isedit" @click="contorl(scope.row, 'edit')"><el-icon color="#79BBFF"><i-ep-Edit /></el-icon> 保存 </span>
          <span style="cursor: pointer;marginLeft: 10px;color:red" @click="contorl(scope.row, 'delete')"><el-icon color="red"><i-ep-Delete /></el-icon> 删除 </span>
        </template>
        </el-table-column>
      </el-table>
        <el-dialog v-model="dialogFormVisible" title="爱好管理" width="500">
          <el-form :model="addform" ref="addfromref" :rules="fromrules">
            <el-form-item label="类型" prop="title" :label-width="formLabelWidth">
              <el-input v-model="addform.title" />
            </el-form-item>
            <el-form-item label="内容" prop="text" :label-width="formLabelWidth">
              <el-input v-model="addform.text" />
            </el-form-item>
          </el-form>
          <template #footer>
            <div class="dialog-footer">
              <el-button @click="dialogFormVisible = false">取消</el-button>
              <el-button type="primary" @click="addsubmit(addfromref)">
                提交
              </el-button>
            </div>
          </template>
        </el-dialog>
    </div>
  </div>
</template>


<script setup>
import { onMounted, reactive, ref } from "vue";
import {searchlikedata,dellike, addlike, updatalike} from "../apis/like"
onMounted(()=>{
  getdata()
})
const dialogFormVisible = ref(false)
const addfromref = ref()
const fromrules = reactive({
  title: [{ required: true, message: '请输入标题', trigger: 'blur' }],
  text: [{ required: true, message: '请输入内容', trigger: 'blur' }]
})
const likelist = ref([])
const getdata = () =>{
  searchlikedata().then(res=>{
    if (res.data.isok) {
      likelist.value = res.data.data
      console.log(res.data, 'data');
    }
  })
}
const title = ref('')
const formLabelWidth = '140px'
const addform = reactive({
title: '',
text: ''
})
const addsubmit = (formref) =>{
  formref.validate(valid =>{
    if (valid) {
      console.log('校验成功执行添加操作');
      let params = {
        title: addform.title,
        text: addform.text
      }
      console.log(params, '参数');
      addlike(params).then(res=>{
        if (res.data.isok) {
          console.log('添加成功');
          ElNotification({
            title: 'Success',
            message: '添加成功',
            type: 'success',
          })
          dialogFormVisible.value = false
          getdata()
        }
      })
    } else {
      console.log('失败');
    }
  })
}
const contorl = (row,type) =>{
  console.log(row, type);
  let params
  if (type == 'edit') {
    params = {
      id: row._id,
      title: row.title,
      text: row.text
    }
    updatalike(params).then(res=>{
      if (res.data.isok) {
        ElNotification({
          title: 'Success',
          message: '更新成功',
          type: 'success',
        })
      }
      row.isedit = false
    })
  } 
  if (type == 'delete') {
    params = {
      id: row._id
    }
    console.log('object');
    dellike(params).then(res=>{
      if (res.data.isok) {
        ElNotification({
          title: 'Success',
          message: '删除成功',
          type: 'success',
        })
        getdata()
      }
    })
  }
}
</script>


<style lang="less" scoped>
.container{
  padding: 40px;
  background-color: #fff;
  .content{
    margin-top: 15px;
    padding: 15px 0;
  }
}

</style>v